
<template>
  <div class="ele-form">
    <!-- 头部 -->
    <header class="pk-header-wrap">
      <div class="pk-header clearfix">
        <div class="left-block">
          <img src="../../assets/image/autopk.png" />
          <a class="logo">智能排课系统</a>
          <span>当前排课学期：{{header.termName}}</span>
        </div>
        <div class="right-block clearfix">
          <p class="qkpk">
            <i class="iconfont icon-shanchu"></i>
            <span>清空排课</span>
          </p>
          <p class="zdpk" @click="choiceClass">
            <i class="iconfont icon-paike"></i>
            <span>自动排课</span>
          </p>
          <el-dialog class="auto-dialog" title="自动排课" :visible.sync="header.autoDialogVisible" width="30%">
            <el-checkbox v-model="header.treeChecked" class="all-checked" @change="treeAllCheckedChange">全选</el-checkbox>
            <el-tree ref="tree" :props="header.treeProps" show-checkbox default-expand-all node-key="id" :data="header.treeData" :render-content="treeRenderContent">
            </el-tree>
            <span slot="footer" class="dialog-footer">
              <el-button @click="header.autoDialogVisible = false" size="small">取 消</el-button>
              <el-button type="primary" @click="showTesting" size="small">开始排课</el-button>
            </span>
          </el-dialog>
          <el-dialog class="testing-dialog" :class="header.testing.score==100?'success':header.testing.score==0?'danger':'warning'" title="排课检测" :visible.sync="header.testingDialogVisible" width="800px">
            <div class="testing-progress clearfix">
              <div class="progress-score">
                <div class="score-body ">
                  <span class="score">{{header.testing.score}}</span>
                </div>
              </div>
              <div class="progress-info">
                <div class="info-msg1">
                  <span class="msg1-1">{{header.testing.result==-1?"正在检测":"检测已完成"}}</span>
                  <span class="test-p-current">{{header.testing.result==-1?"":header.testing.result==0?"未发现问题":header.testing.result==1?"存在警告项":"存在冲突项"}}！</span>
                </div>
                <div class="info-msg2">
                  <span class="test-c-current">{{header.testing.result==-1?"正在检测...":header.testing.result==0?"点击开始排课按钮进行排课！":header.testing.result==1?"请注意查看警告项，点击开始排课按钮进行排课！":"请将冲突项解决后再进行自动排课！"}}</span>
                </div>
              </div>
              <div class="progress-btn">
                <a href="javascript:void(0)" class="el-button el-button--default el-button--medium is-round btn-startpk">开始排课</a>
              </div>
            </div>
            <div>{{header.testing.power.msg}}</div>
            <div>{{header.testing.free.msg}}</div>
            <div>{{header.testing.teacherCourse.msg}}</div>
            <div>{{header.testing.allPlan.msg}}</div>
            <div>{{header.testing.planSet.msg}}</div>
            <div>{{header.testing.planWeekHours.msg}}</div>
            <div>{{header.testing.planTeacher.msg}}</div>
            <div>{{header.testing.planRoom.msg}}</div>
            <div>{{header.testing.planRoomHours.msg}}</div>
            <div>{{header.testing.roomWeekHours.msg}}</div>
            <div>{{header.testing.planLimit.msg}}</div>
            <div>{{header.testing.oneClass.msg}}</div>
            <div>{{header.testing.holiday.msg}}</div>
            <div>{{header.testing.timeTable.msg}}</div>
          </el-dialog>
        </div>
      </div>
    </header>
    <div class="ele-content">
      <div class="pk-content-wrap clearfix">
        <!-- 所有课表 -->
        <div class="all-schedule-box">
          <div class="all-schedule-header clearfix">
            <div class="all-schedule-select">
              <el-dropdown @command="ddCommand" trigger="click">
                <span class="el-dropdown-link">
                  {{left.leftMenuText}}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="0" data-type="0">班级列表</el-dropdown-item>
                  <el-dropdown-item command="1" data-type="1">教师列表</el-dropdown-item>
                  <el-dropdown-item command="2" data-type="2">教室列表</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <a data-type="1" class="iconfont icon-suoxiao full-screen" href="javascript:;"></a>
          </div>
          <div class="search-box">
            <el-input size="small" placeholder="请输入内容" v-model="left.query" suffix-icon="el-icon-search">
            </el-input>
          </div>
          <ul class="grade-list-box">
            <li class="grade-list" v-for="item in queryLeftList(left.list)" :key="item.Value" :data-id="item.Value">
              <i class="iconfont icon-dian"></i>{{item.Name}}
            </li>
          </ul>
        </div>

        <!-- 课程详情 -->
        <x-timeTable></x-timeTable>

        <!-- 课程详情 -->
        <x-relateTable></x-relateTable>
      </div>
      <!-- 两边按钮 -->
      <span data-type="1" class="show-btn show-left">所有课表</span>
      <span data-type="2" class="show-btn show-right">关联课表</span>
    </div>
  </div>
</template>

<script>
// 引用css
import "@/assets/css/site.css";
import { api_config } from "../../../util/config.js";
import { utils } from "../../../util/util.js";
import TimeTable from "@/components/timeTable.vue";
import RelateTable from "@/components/relateTable.vue";

export default {
  components: { "x-timeTable": TimeTable, "x-relateTable": RelateTable },
  data() {
    return {
      power: -1, //排课权限 -1无 0可以调整不能自动排课 1所有权限
      termSet: false, //学期是否设置
      header: {
        termName: "-", //当前学期
        autoDialogVisible: false, //自动排课弹出框是否显示
        treeProps: {
          label: "name",
          children: "zones",
          isLeaf: "leaf"
        }, //弹出框参数
        treeData: [], //树数据
        treeChecked: false, //自动排课班级是否全选
        testingDialogVisible: false, //排课检测弹出框是否显示
        testingInit: {}, //用来存储初始值
        testing: {
          score: 100, //检索总分
          result: -1, //总结果-1正在检测 0正常 1警告 2失败
          power: {
            //权限检测
            state: -1, //检测状态:0成功，1警告，2失败(不能进行排课)
            msg: "等待检测",
            data: []
          },
          free: {
            //排课系统是否空闲
            state: -1, //检测状态:0成功，1警告，2失败(不能进行排课)
            msg: "等待检测",
            data: []
          },
          teacherCourse: {
            //教师课程关系
            state: -1, //检测状态:0成功，1警告，2失败(不能进行排课)
            msg: "等待检测",
            data: []
          },
          allPlan: {
            //总体计划
            state: -1, //检测状态:0成功，1警告，2失败(不能进行排课)
            msg: "等待检测",
            data: []
          },
          planSet: {
            //班级教学计划设置情况
            state: -1, //检测状态:0成功，1警告，2失败(不能进行排课)
            msg: "等待检测",
            data: []
          },
          planWeekHours: {
            //班级教学计划周课时
            state: -1, //检测状态:0成功，1警告，2失败(不能进行排课)
            msg: "等待检测",
            data: []
          },
          planTeacher: {
            //教学计划教师设置
            state: -1, //检测状态:0成功，1警告，2失败(不能进行排课)
            msg: "等待检测",
            data: []
          },
          planRoom: {
            //教学计划教室设置
            state: -1, //检测状态:0成功，1警告，2失败(不能进行排课)
            msg: "等待检测",
            data: []
          },
          planRoomHours: {
            //教学计划教室课时设置
            state: -1, //检测状态:0成功，1警告，2失败(不能进行排课)
            msg: "等待检测",
            data: []
          },
          roomWeekHours: {
            //教室周课时
            state: -1, //检测状态:0成功，1警告，2失败(不能进行排课)
            msg: "等待检测",
            data: []
          },
          planLimit: {
            //计划限制条件
            state: -1, //检测状态:0成功，1警告，2失败(不能进行排课)
            msg: "等待检测",
            data: []
          },
          oneClass: {
            //合班数据
            state: -1, //检测状态:0成功，1警告，2失败(不能进行排课)
            msg: "等待检测",
            data: []
          },
          holiday: {
            //节假日
            state: -1, //检测状态:0成功，1警告，2失败(不能进行排课)
            msg: "等待检测",
            data: []
          },
          timeTable: {
            //已排课程
            state: -1, //检测状态:0成功，1警告，2失败(不能进行排课)
            msg: "等待检测",
            data: []
          }
        } //排课检测详情
      },
      left: {
        query: "", //查询字符串
        leftMenuText: "班级列表", //左侧下拉菜单名称
        leftMenuValue: 0, //左侧下拉菜单值
        list: []
      }
    };
  },
  methods: {
    //初始化加载
    init() {
      //有权限
      if (this.validatePKPower()) {
        //加载当前排课学期
        if (this.loadPKTerm()) {
          //加载左侧列表
          this.loadLeftList();
          //赋值初始值
          this.header.testingInit = utils.clone(this.header.testing);
        }
      }
    },
    /* 左侧菜单切换 */
    ddCommand(command) {
      this.left.leftMenuText =
        command == 0 ? "班级列表" : command == 1 ? "教师列表" : "教室列表";
      this.left.leftMenuValue = command;
      //加载左侧列表
      this.loadLeftList();
    },
    /*验证排课权限*/
    async validatePKPower() {
      let r = await this.$http.get(api_config.isHavePKPower);
      if (!r || !r.body) {
        this.$message.error("error");
        return false;
      }

      let data = r.body;
      if (!data.Result) {
        this.$message.error("您无此模块操作权限！");
        return false;
      }
      //赋值权限
      this.power = data.Data;
      return true;
    },
    /*获取当前排课学期*/
    async loadPKTerm() {
      //获取学期
      let r = await this.$http.get(api_config.getPKTerm);
      if (!r || !r.body) {
        this.$message.error("error");
        return false;
      }

      let data = r.body;
      if (!data.Result) {
        this.$message.error(data.Msg);
        return false;
      }

      //学期是否设置
      this.termSet = true;
      this.header.termName = data.Data;
      return true;
    },
    /*根据类型获取左侧菜单列表*/
    async loadLeftList() {
      //获取列表数据
      let r = await this.$http.post(api_config.getListByType, {
        type: this.left.leftMenuValue
      });

      if (!r || !r.body) {
        this.$message.error("error");
        return;
      }

      let data = r.body;
      if (!data.Result) {
        this.$message.error(data.Msg);
        return;
      }

      //给左侧菜单重新渲染
      this.left.list = data.Data;
    },
    //查询左侧列表
    queryLeftList(list) {
      if (this.left.query === "") {
        return list;
      }
      return list.filter(item => {
        if (item.Name.indexOf(this.left.query) != -1) {
          return item;
        }
      });
    },
    //选择要排课的班级
    choiceClass() {
      if (this.power == -1 || !this.termSet) {
        this.$message.error("无权限或未设置排课学期！");
        return;
      }
      this.header.treeChecked = false;
      //显示弹出框
      this.header.autoDialogVisible = true;

      //加载班级树
      this.loadClassTree();
    },
    //加载班级树
    async loadClassTree() {
      //获取班级树
      let r = await this.$http.post(api_config.getClassTree);
      if (!r || !r.body) {
        this.$message.error("error");
        return;
      }

      let data = r.body;
      if (!data.Result) {
        this.$message.error(data.Msg);
        return;
      }

      //给树赋值
      this.header.treeData = data.Data;
      this.$refs.tree.setCheckedKeys([]);
    },
    //定义渲染树的方式
    treeRenderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>
            {data.name}
            {data.isok == null ? (
              ""
            ) : data.isok ? (
              <span style="color:#67C23A">（已排）</span>
            ) : (
              <span style="color:#F56C6C">（未排）</span>
            )}
          </span>
        </span>
      );
    },
    //全选
    treeAllCheckedChange(checked) {
      if (checked) {
        //获取所有节点key
        let keys = [];
        this.header.treeData.forEach(function(item, index) {
          item.zones.forEach(function(item2, index2) {
            keys.push(item2.id);
          });
        });
        //全选
        this.$refs.tree.setCheckedKeys(keys);
      } else {
        this.$refs.tree.setCheckedKeys([]);
      }
    },
    //显示检测排课框
    async showTesting() {
      //获取选择的班级
      let keys = this.$refs.tree.getCheckedKeys(true);
      if (keys.length < 1) {
        this.$message.error("请选择要自动排课的班级");
        return;
      }

      this.header.autoDialogVisible = false;
      this.header.testingDialogVisible = true;

      //重置状态
      this.header.testing = utils.clone(this.header.testingInit);

      //id集合
      let ids = keys.join(",");

      console.log(this.header.testing.power.msg);
      //检测开始
      let r, data;
      //权限检测
      r = await this.$http.get(api_config.testing_power);
      if (r && r.body && r.body.Result) {
        data = r.body.Data;
        //检测完成
        this.header.testing.power.state = data.State;
        this.header.testing.power.msg = data.Msg;
        this.header.testing.power.data = data.Data;
      }
      if (!this.setTestingState(r)) {
        return;
      }

      //系统空闲检测
      r = await this.$http.get(api_config.testing_free);
      if (r && r.body && r.body.Result) {
        data = r.body.Data;
        //检测完成
        this.header.testing.free.state = data.State;
        this.header.testing.free.msg = data.Msg;
        this.header.testing.free.data = data.Data;
      }
      if (!this.setTestingState(r)) {
        return;
      }

      //教师课程检测
      r = await this.$http.get(api_config.testing_teacherCourse);
      if (r && r.body && r.body.Result) {
        data = r.body.Data;
        //检测完成
        this.header.testing.teacherCourse.state = data.State;
        this.header.testing.teacherCourse.msg = data.Msg;
        this.header.testing.teacherCourse.data = data.Data;
      }
      if (!this.setTestingState(r)) {
        return;
      }

      //总体计划检测
      r = await this.$http.get(api_config.testing_allPlan);
      if (r && r.body && r.body.Result) {
        data = r.body.Data;
        //检测完成
        this.header.testing.allPlan.state = data.State;
        this.header.testing.allPlan.msg = data.Msg;
        this.header.testing.allPlan.data = data.Data;
      }
      if (!this.setTestingState(r)) {
        return;
      }

      //计划设置检测
      r = await this.$http.get(api_config.testing_planSet, {
        params: {
          classIDs: ids
        }
      });
      if (r && r.body && r.body.Result) {
        data = r.body.Data;
        //检测完成
        this.header.testing.planSet.state = data.State;
        this.header.testing.planSet.msg = data.Msg;
        this.header.testing.planSet.data = data.Data;
      }
      if (!this.setTestingState(r)) {
        return;
      }

      //计划周课时检测
      r = await this.$http.get(api_config.testing_planWeekHours, {
        params: {
          classIDs: ids
        }
      });
      if (r && r.body && r.body.Result) {
        data = r.body.Data;
        //检测完成
        this.header.testing.planWeekHours.state = data.State;
        this.header.testing.planWeekHours.msg = data.Msg;
        this.header.testing.planWeekHours.data = data.Data;
      }
      if (!this.setTestingState(r)) {
        return;
      }

      //计划教师检测
      r = await this.$http.get(api_config.testing_planTeacher, {
        params: {
          classIDs: ids
        }
      });
      if (r && r.body && r.body.Result) {
        data = r.body.Data;
        //检测完成
        this.header.testing.planTeacher.state = data.State;
        this.header.testing.planTeacher.msg = data.Msg;
        this.header.testing.planTeacher.data = data.Data;
      }
      if (!this.setTestingState(r)) {
        return;
      }

      //计划教室检测
      r = await this.$http.get(api_config.testing_planRoom, {
        params: {
          classIDs: ids
        }
      });
      if (r && r.body && r.body.Result) {
        data = r.body.Data;
        //检测完成
        this.header.testing.planRoom.state = data.State;
        this.header.testing.planRoom.msg = data.Msg;
        this.header.testing.planRoom.data = data.Data;
      }
      if (!this.setTestingState(r)) {
        return;
      }

      //计划教室课时
      r = await this.$http.get(api_config.testing_planRoomHours, {
        params: {
          classIDs: ids
        }
      });
      if (r && r.body && r.body.Result) {
        data = r.body.Data;
        //检测完成
        this.header.testing.planRoomHours.state = data.State;
        this.header.testing.planRoomHours.msg = data.Msg;
        this.header.testing.planRoomHours.data = data.Data;
      }
      if (!this.setTestingState(r)) {
        return;
      }

      //教室周课时
      r = await this.$http.get(api_config.testing_roomWeekHours, {
        params: {
          classIDs: ids
        }
      });
      if (r && r.body && r.body.Result) {
        data = r.body.Data;
        //检测完成
        this.header.testing.roomWeekHours.state = data.State;
        this.header.testing.roomWeekHours.msg = data.Msg;
        this.header.testing.roomWeekHours.data = data.Data;
      }
      if (!this.setTestingState(r)) {
        return;
      }

      //计划限制
      r = await this.$http.get(api_config.testing_planLimit, {
        cparams: {
          classIDs: ids
        }
      });
      if (r && r.body && r.body.Result) {
        data = r.body.Data;
        //检测完成
        this.header.testing.planLimit.state = data.State;
        this.header.testing.planLimit.msg = data.Msg;
        this.header.testing.planLimit.data = data.Data;
      }
      if (!this.setTestingState(r)) {
        return;
      }

      //合班
      r = await this.$http.get(api_config.testing_oneClass, {
        params: {
          classIDs: ids
        }
      });
      if (r && r.body && r.body.Result) {
        data = r.body.Data;
        //检测完成
        this.header.testing.oneClass.state = data.State;
        this.header.testing.oneClass.msg = data.Msg;
        this.header.testing.oneClass.data = data.Data;
      }
      if (!this.setTestingState(r)) {
        return;
      }

      //节假日
      r = await this.$http.get(api_config.testing_holiday, {
        params: {
          classIDs: ids
        }
      });
      if (r && r.body && r.body.Result) {
        data = r.body.Data;
        //检测完成
        this.header.testing.holiday.state = data.State;
        this.header.testing.holiday.msg = data.Msg;
        this.header.testing.holiday.data = data.Data;
      }
      if (!this.setTestingState(r)) {
        return;
      }

      //已排课时
      r = await this.$http.get(api_config.testing_timeTable, {
        params: {
          classIDs: ids
        }
      });
      if (r && r.body && r.body.Result) {
        data = r.body.Data;
        //检测完成
        this.header.testing.timeTable.state = data.State;
        this.header.testing.timeTable.msg = data.Msg;
        this.header.testing.timeTable.data = data.Data;
      }
      if (!this.setTestingState(r)) {
        return;
      }
    },
    //设置检测结果
    setTestingState(r) {
      if (!r || !r.body) {
        this.$message.error("error");
        //检测出错
        this.header.testing.result = 2;
        this.header.testing.score = 0;
        return false;
      }
      let data = r.body;
      if (!data.Result) {
        this.$message.error(data.Msg);
        //检测出错
        this.header.testing.result = 2;
        this.header.testing.score = 0;
        return false;
      }

      //失败
      if (data.Data.State == 2) {
        //检测不通过
        this.header.testing.result = 2;
        this.header.testing.score = 0;
        return false;
      } else if (data.Data.State == 1) {
        //警告
        this.header.testing.result = 1;
        //警告总分不能小于60
        this.header.testing.score =
          this.header.testing.score >= 65 ? this.header.testing.score - 5 : 60;
      }

      return true;
    }
  },
  //初始化方法
  mounted() {
    //初始化
    this.init();
  }
};
</script>

<style>
.auto-dialog .el-dialog__header {
  padding: 8px 20px 0px;
}
.auto-dialog .el-tree {
  max-height: 400px;
  overflow: auto;
}
.auto-dialog .el-checkbox.all-checked {
  position: absolute;
  top: 22px;
  left: 100px;
}
.testing-progress {
  background-color: #fff;
  padding: 10px 15px 10px 20px;
}
.testing-progress .progress-score {
  width: 85px;
  float: left;
  height: 100%;
}
.testing-progress .progress-score .score-body {
  border: 3px solid;
  border-radius: 50%;
  height: 100%;
  text-align: center;
}
.testing-progress .progress-score .score {
  line-height: 79px;
  font-size: 30px;
}
.testing-dialog .el-dialog__header {
  padding: 10px 20px 0px;
  line-height: 20px;
}
.testing-dialog .el-dialog__body {
  padding: 10px 20px;
}
.testing-progress .progress-info {
  float: left;
  height: 100%;
}
.testing-progress .progress-info .info-msg1 {
  line-height: 65px;
  padding: 0 15px;
  font-size: 30px;
}
.testing-progress .progress-info .info-msg1 {
  line-height: 65px;
  padding: 0 15px;
  font-size: 30px;
}
.testing-progress .progress-info .info-msg2 {
  padding: 0px 18px;
  line-height: 1px;
}
.testing-progress .progress-info .info-msg2 {
  padding: 0px 18px;
  line-height: 1px;
}
.testing-progress .progress-btn {
  float: right;
  height: 100%;
  line-height: 85px;
  padding-right: 28px;
}
.testing-dialog.success .testing-progress {
  color: #67c23a;
}
.testing-dialog.warning .testing-progress {
  color: #e6a23c;
}
.testing-dialog.danger .testing-progress {
  color: #f56c6c;
}

.testing-dialog.success .btn-startpk {
  background-color: #67c23a;
  color: #fff;
}

.testing-dialog.warning .btn-startpk {
  background-color: #e6a23c;
  color: #fff;
}

.testing-dialog.danger .btn-startpk {
  background-color: #f56c6c;
  color: #fff;
}
</style>